<template>
	<div class="container">
		<div class="AllTitle">
			<div class="title1">
				<label>基本信息</label>
				<div class="info">
					
					<span>房间号：{{owner.homeNumber}}</span><br>
					<span>业主名称：{{owner.ownerName}}</span><br>
					<span>建筑面积：{{owner.area}}</span><br>
					<span>联系电话：{{owner.phone}}</span><br>
				</div>
			</div>
			<div class="title2">
				<div class="left-column">
					<span>应缴金额：{{makeMoney}}</span><br>
					<span>实收金额：{{totalMoney}}</span><br>
				</div>
				<div class="right-column">
					<span>滞纳金额：{{lateMoney}}</span><br>
				</div>
			</div>
			<div class="title3">
				<div class="content">
					<button @click="submitForm">结算</button>
				</div>
			</div>
		</div>

		<!-- 表格区域 -->
		<div class="table">
			<el-table v-loading="loading" :data="makeList">
				<el-table-column label="费用名称" align="center" prop="makeContent" />
				<el-table-column label="费用起始时间" align="center" prop="makeStartTime" />
				<el-table-column label="费用终止时间" align="center" prop="makeEndTime" />
				<el-table-column label="费用生成时间" align="center" prop="makeCreateTime" />
				<el-table-column label="应收金额" align="center" prop="makeTotal" />
				<el-table-column label="滞纳金" align="center" prop="lateMoney" />
			</el-table>
		</div>


	</div>



</template>
<script>
	
	import {
		listMake,
		updateMake
	} from "@/api/charge/make";
	import {
		getOwner
	} from "@/api/rcgl/repair";
	import {
		addJzszs2
	} from "@/api/rcgl/jzsz";
	export default {
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize:999,
					balconyunithomeIds: [],
					status: 0
				},
				
				owner: {},
				makeList: [],
				
				makeMoney: 0,
				lateMoney: 0,
				totalMoney: null,
				loading: true,
			}
		},
		methods: {
			//提交表单内容
			
			submitForm() {
				this.$confirm('确认结算吗？', '提示', {
						
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					for (let list of this.makeList) {
						addJzszs2(list).then(response => {});
						updateMake(list.makeId).then(res => {});
					}
				}).then(() => {
					this.$message({
						type: 'success',
						message: '结算成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
					})

				})
			},

			//获取业主信息

			selectOwner() {
				getOwner(this.$route.query.id).then(response => {
					this.owner = response.data;
					console.log(this.owner)
				});
			},

			/** 查询费用生成列表 */
			getList() {

				this.loading = true;
				listMake(this.queryParams).then(response => {
					this.makeList = response.rows;
					for (let list of this.makeList) {
						let lateMoney = this.createCostLate(list.costLate, list.makeCreateTime, list.makeTotal)
						list.lateMoney = lateMoney
						this.makeMoney += list.makeTotal;
						this.lateMoney += lateMoney;
					}
					this.totalMoney = this.makeMoney + this.lateMoney

					this.loading = false;
				});
			},
			createCostLate(costLate, createTime, makeTotal) {
				let now = new Date();
				let day = this.getDaysDifference(createTime, now)
				console.log(day)
				let lateMoney = day * makeTotal * costLate
				return lateMoney
			},

			getDaysDifference(date1, date2) {
				// 创建 Date 对象
				const d1 = new Date(date1);
				const d2 = new Date(date2);

				// 计算两个时间的时间戳差值（毫秒）
				const timeDifference = Math.abs(d1.getTime() - d2.getTime());


				// 将时间戳差值转换为天数
				const daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));

				return daysDifference;
			}
		},

		created() {
			const id = this.$route.query.id
			id[0] = Number(id[0])
			this.queryParams.balconyunithomeIds = id
			this.selectOwner();
		},
		mounted() {
			this.getList();
		}
	};
</script>

<style>
	.container {
		width: 100%;
		/* border: 1px solid #ff0000; */
	}

	.AllTitle {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 水平间距分布 */
		align-items: center;
		/* 垂直居中对齐 */
		width: 100%;
		/* 宽度占满父容器 */
		/* 显示底部边框灰色 */
		border-bottom: 1px solid #848484;
		height: 150px;
	}

	.AllTitle .title1 {
		width: 30%;
		/* border: 1px solid #71ff39; */
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: column;
		/* 子项垂直排列 */
		align-items: center;
		/* 水平居中对齐 */
		text-align: center;
		/* 文本居中对齐 */
		font-size: 20px;
		color: rgb(56, 196, 168);
	}

	.AllTitle .title1 .info {
		font-size: 14px;
		color: rgb(161, 161, 161);
	}

	.AllTitle .title2 {
		/* border: 1px solid #3d00f4; */
		width: 40%;
		display: flex;
		/* 使用 Flexbox 布局 */
		font-size: 20px;
		color: rgb(54, 54, 54);
	}

	.AllTitle .title2 .left-column,
	.AllTitle .title2 .right-column {
		flex: 1;
		/* 每个子项占据相等的空间 */
		padding: 10px;
		/* 内边距 */
		/* border: 1px solid #ccc; 边框 */
	}

	.AllTitle .title3 {
		/* border: 1px solid #c6a100; */
		width: 30%;
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: center;
		/* 水平居中对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		height: 100%;
		/* 高度占满父容器 */
	}

	.AllTitle .title3 .content {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: column;
		/* 子项垂直排列 */
		align-items: center;
		/* 水平居中对齐 */
		justify-content: center;
		/* 垂直居中对齐 */
	}

	.AllTitle .title3 .content label {
		font-size: 26px;
	}

	.AllTitle .title3 .content button {
		background-color: white;
		/* 背景颜色为白色 */
		color: rgb(56, 196, 168);
		/* 字体颜色为绿色 */
		border: none;
		/* 移除默认边框 */
		padding: 10px 20px;
		/* 内边距 */
		font-size: 16px;
		/* 字体大小 */
		box-shadow: 0 4px 6px rgba(104, 211, 190, 0.5);
		/* 添加阴影效果 */
		cursor: pointer;
		/* 鼠标悬停时显示指针 */
		/* 圆角 */
		border-radius: 10px;
		margin-top: 10px;
	}


	.table {
		margin-top: 60px;

	}
</style>